<script setup lang="ts">
	// --组合式 API 模板
	import { ref } from 'vue'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import HttpService from '../../api/index';
	const httpService = new HttpService('https://example.com/api')
	const title = ref("标题")
	const userInfo = ref(null)
	const formData = ref(null)
	// onLoad 接受 A 页面传递的参数
	onLoad((option) => {
		console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}

	});

	onShow(() => {
		console.log("B 页面 onShow");
	});

	// --loadData请求数据，直接使用，参数格式：
	const loadData = async (param : any) => {
		return new Promise((resolve, reject) => {
			try {
				 httpService.request({
					url: '/users/1',
					data: param,
					method: 'GET'
				}).then((res) => {
					console.log(res);
				})
			} catch (error) {
				console.error(error)
			}
		});
	}
	// --getData使用示例
	const getDataTest = () => {
		getData({
			storedPro: 'P_H5_ReportHead',
			paraNum: 3,
			resultSetNum: 1,
			para1: userInfo.value.userId,
			para2: formData.value
		}).then((res : any) => {
			console.log(res);
		});
	}
	// --getData请求数据,通用存储过程调用，
	/*  --参数格式：
	{
		x: '',
		y: '',
		..:..
	}
	*/
	const getData = (param : any) => {
		return new Promise((resolve, reject) => {
			httpService.request({
				url: '/api/ajax.ashx?oper=LTTG_Multifunction',
				data: param,
				method: 'GET'
			}).then((res : any) => {
				if (res.status == '1') {
					resolve(res);
				} else {
					reject('获取信息失败' + res.msg)
				}
			})
		})
	};
	const to = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	}

	const isVisible = ref(true);

	const toggleFade = () => {
		isVisible.value = !isVisible.value;
	};

	const beforeEnter = (el : HTMLElement) => {
		// 初始化元素的样式
		el.style.opacity = '0';
	};

	const enter = (el : HTMLElement, done : () => void) => {
		// 执行进入时的动画
		let opacity = 0;
		const timer = setInterval(() => {
			opacity += 0.1;
			el.style.opacity = opacity.toString();
			if (opacity >= 1) {
				clearInterval(timer);
				done();
			}
		}, 50);
	};

	const afterEnter = (el : HTMLElement) => {
		// 进入后的钩子
	};

	const beforeLeave = (el : HTMLElement) => {
		// 离开前的钩子
	};

	const leave = (el : HTMLElement, done : () => void) => {
		// 执行离开时的动画
		let opacity = 1;
		const timer = setInterval(() => {
			opacity -= 0.1;
			el.style.opacity = opacity.toString();
			if (opacity <= 0) {
				clearInterval(timer);
				done();
			}
		}, 50);
	};

	const afterLeave = (el : HTMLElement) => {
		// 离开后的钩子
	};
</script>
<template>
	<view class="page-container">
		<button @click="to" class="tac">测试</button>
		<button @click="toggleFade">Toggle Fade</button>
		<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
			@before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave">
			<div v-if="isVisible" class="box">This box will fade in and out.</div>
		</transition>
	</view>
</template>



<style lang="less" scoped>
.color{color: #1faccc;}
</style>